<!--
  - Copyright (c) 2018.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->

<template>
  <div class="Home" v-loading="loading" element-loading-text="加载业务数据 ... ...">
    <div class="history">
      <span class="title">历史操作</span>
      <ul class="historyNews">
        <li class="historyNew" v-for="(item,ind) in history" :key="ind">
          <i class="joysicon joys-icon-spot"></i>
          <ol class="news">
            <li class="tit">{{item.tit}}</li>
            <li class="time">{{item.time}}</li>
            <li>{{item.type}}
              <a href="#">
                <span @click="taskClick(item)">{{item.name}}</span>
              </a>
            </li>
            <li>{{item.idea}}{{item.status}}</li>
            <li>{{item.why}}{{item.reason}}</li>
          </ol>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import {mapState, mapActions} from 'vuex'

  export default {
    name: 'HomePageHistory',
    data() {
      return {
        loading:true,
        pieIndex: "",
        pieId: "23",
        history: [
          {
            "tit": "智能新增客户",
            "appletId": "200510",
            "type": "客户名称：",
            "name": "河南九思商务服务有限公司",
            "primaryKey": "7ebddc8f-3dc1-403e-86b6-66ed0a30b757",
            "customerType":"ENTERPRISE",
            "time": "2018/09/30 14:13:51",
          },
          {
            "tit": "新建项目信息",
            "appletId": "201520",
            "type": "项目名称：",
            "name": " Anne项目测试20181125",
            "primaryKey": "2190cdfd-fb53-4aec-bbc6-5f6371f84165",
            "idea": "客户名称：",
            "status": "青岛海尔电器有限公司",
            "time": "2018/09/30 13:33:04",
            "billStatus": "审核通过"
          },
          {
            "tit": "智能新增客户",
            "appletId": "200510",
            "type": "客户名称：",
            "name": "招银金融租赁有限公司",
            "primaryKey": "e3891409-9a80-420c-86b7-1747261d818b",
            "customerType":"ENTERPRISE",
            "time": "2018/09/28 11:20:04",
          },
          {
            "appletId": "202010",
            "tit": "新增合同信息",
            "type": "合同名称：",
            "name": "测试合同",
            "primaryKey": "dbc95115-83fd-4e80-baf3-b3d2d3d9806d",
            "why": "付款金额：",
            "reason": "1,000,000.00",
            "time": "2018/09/28 9:50:24",
            "billStatus": "审核通过"
          },
          {
            "appletId": "202010",
            "tit": "新增合同信息",
            "type": "合同名称：",
            "name": "测试合同123_2",
            "primaryKey": "40c3d4a4-d9b7-4f02-aa1c-5ca89390bf8d",
            "why": "付款金额：",
            "reason": "100,000,000.00",
            "time": "2018/9/27 13:46:29",
            "billStatus": "审核通过"
          }
        ],
      }
    },
    mounted() {
      // 查询业务数据 // TODO 延迟2秒，模拟查询业务数据的过程
      this.loadData()
    },
    computed: {
      ...mapState(['applets'])
    },

    methods: {
      // 模拟查询业务数据
      loadData() {
        // this.$http.get('/joys-rest/joys-master-data/roles/all').then(resp => {
        //   this.allRoles = resp.data
        //   console.log(this.allRoles)
        this.loaded()
        // }).catch(err => {
        //   this.$message.error(err.response.data.message)
        // })

      },
      // TODO 业务数据查询完毕后,并且页面渲染完毕后，取消加载动画
      loaded(){
        this.$nextTick(() => { //渲染完毕
          this.loading=false
        })
      },
      topCheck(ind) {
        let appletId = this.top[ind].appletId;
        // this.openApplet({appletId});
        var params = {appletId: appletId}
        this.$bus.sendMessage('OPEN_APPLET', params)
      },

      // 联查
      taskClick(item) {
        // this.openApplet(item)
        this.$bus.sendMessage('OPEN_APPLET', item)
      },

      ...mapActions(['openApplet'])
    }
  }
</script>

<style scoped lang="less">
  .Home {
    padding: 0px 0px 0px 0px;
    width: 100%;
    height: 100%;
    display: flex;
    overflow: hidden;
    i {
      color: #979797;
    }
    .new {
      width: 100%;
      height: 100%;
      .top {
        width: 100%;
        height: 90%;
        display: flex;
        justify-content: space-between;
        li {
          width: 100%;
          background: #fff;
          display: flex;
          justify-content: space-between;
          .head {
            width: 100%;
            margin: 24px 0 0 24px;
            display: flex;
            flex-direction: column;
            align-items: baseline;
            span {
              height: 20px;
              color: #323C47;
            }
            .num {
              margin-top: 10px;
              color: #4DA1FF;
              font-size: 36px;
            }
          }
          i {
            margin: 12px 20px 0 0;
          }
        }
      }
      .middle {
        /*margin: 24px 0;*/
        width: 100%;
        height: 315px;
        display: flex;
        justify-content: space-between;
        .projectProgress {
          background: #fff;
          width: 100%;
          height: 100%;
          position: relative;
          .pro {
            color: #979797;
            font-size: 16px;
            position: absolute;
            top: 20px;
            left: 20px;
          }
          i {
            color: #979797;
            position: absolute;
            top: 12px;
            right: 16px;
          }
          #pie {
            width: 100%;
            height: 180px;
            margin: 60px auto 0;
          }
          .count {
            width: 214px;
            height: 38px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            li {
              width: 100%;
              height: 100%;
              h6 {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                .dot {
                  width: 7px;
                  height: 7px;
                  border-radius: 50%;
                  background: #D06464;
                }
                .itemNum {
                  margin-left: 10px;
                  color: #2A2D2E;
                  font-size: 14px;
                }
              }
              .tit {
                margin-left: 16px;
                color: #8c8c8c;
                font-size: 12px;
              }
              &:first-child {
                .dot {
                  background: #1FB6FF;
                }
              }
              &:last-child {
                .dot {
                  background: #9475F4;
                }
              }
            }
          }
        }
        .busienseOverview {
          width: 100%;
          height: 100%;
          background: #fff;
          display: flex;
          flex-direction: column;
          justify-content: center;
          .tit {
            width: 100%;
            height: 15%;
            display: flex;
            justify-content: space-between;
            span {
              color: #979797;
              font-size: 16px;
              margin: 20px 0 0 20px;
            }
            i {
              color: #979797;
              margin: 12px 16px 0 0;
            }
          }
          #bar {
            width: 100%;
            height: 100%;
            margin: 0 auto;
          }
        }
      }
      .bottom {
        width: 100%;
        height: 272px;
        background: #fff;
        position: relative;
        .title {
          text-align: left;
          font-size: 16px;
          color: #979797;
          position: absolute;
          top: 20px;
          left: 20px;
        }
        .tasks {
          width: 100%;
          position: absolute;
          left: 20px;
          top: 61px;
          li {
            width: 100%;
            height: 43px;
            margin: 0 0 12px 0;
            display: flex;
            justify-content: space-between;
            .task {
              display: flex;
              flex-direction: column;
              justify-content: flex-start;
              p {
                display: flex;
                justify-content: flex-start;
                span {
                  color: #52504D;
                  font-size: 13px;
                  height: 18px;
                  line-height: 18px;
                }
                i {
                  font-size: 16px;
                  color: #BC0000;
                  font-weight: bold;
                  margin-right: 16px;
                }
                .type {
                  width: 128px;
                  height: 18px;
                  line-height: 18px;
                  text-align: left;
                  color: #2A2D2E;
                }
                .project {
                  color: #0062DE;
                  font-size: 13px;
                  font-weight: normal;
                }
                .href {
                  text-decoration: none
                }
              }
              .time {
                text-align: left;
                color: #868686;
                font-size: 12px;
                margin-left: 40px;
              }

            }
            .btn {
              button {
                width: 44px;
                height: 24px;
                border-radius: 12px;
                font-size: 13px;
                outline: none;
              }
              .agree {
                background: #001616;
                color: #fff;
              }
              .more {
                color: #001616;
                border: 1px solid #001616;
                margin-left: 16px;
              }
            }
          }
        }
        .taskCenter {
          text-align: right;
          color: #0062DE;
          font-size: 13px;
          position: absolute;
          bottom: 24px;
          right: 36px;
        }
      }
    }
    .history {
      flex: 1;
      height: 100%;
      margin-left: 1px;
      background: #fff;
      position: relative;
      .title {
        height: 20px;
        line-height: 20px;
        text-align: left;
        font-size: 16px;
        color: #979797;
        position: absolute;
        top: 16px;;
        left: 16px;
      }
      .historyNews {
        width: 100%;
        height: 660px;
        position: absolute;
        left: 24px;
        top: 60px;
        border-left: 1px solid #f7f7f7;
        .historyNew {
          display: flex;
          justify-content: flex-start;
          margin: 0 0 55px -8px;
          i {
            margin-top: 16px;
            color: #001616;
          }
          .news {
            margin-left: 22px;
            li {
              text-align: left;
              margin-bottom: 4px;
              color: #868686;
              font-size: 12px;
              span {
                color: #2A6184;
                background: rgba(42, 97, 132, .2)
              }
            }
            .tit {
              color: #494949;
              font-size: 13px;
              font-weight: bold;
            }
            .time {
              font-size: 10px;
            }
          }
        }
      }

    }
  }

</style>
